<!-- 特气耗量统计 -->
<template>
  <div class="consumption-container">
    <div class="tab-bar">
      <CustomTabs :tabList="tabList" :activeName="activeName" @tabSelect="handelTabSelected" />
    </div>
    <div v-if="activeName === 'detailList'">
      <DetailList />
    </div>
    <div v-if="activeName === 'meterReading'">
      <MeterReading />
    </div>
    <div v-if="activeName === 'decant'">
      <Decant />
    </div>
    <div v-if="activeName === 'analysis'">
      <Analysis />
    </div>
    <div v-if="activeName === 'inspection'">
      <Inspection />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CustomTabs from "@/components/Tabs/index.vue";
import DetailList from "./component/detailList.vue";
import MeterReading from "./component/meterReading.vue";
import Decant from "./component/decant.vue";
import Analysis from "./component/analysis.vue";
import Inspection from "./component/inspection.vue";

defineOptions({
  name: "GAS_CONSUMPTION_SPECIALGAS"
});

const tabList = ref([
  { name: "detailList", label: "耗量明细" },
  { name: "meterReading", label: "自动抄表记录" },
  { name: "decant", label: "换瓶记录修正" },
  { name: "analysis", label: "耗量分析" },
  { name: "inspection", label: "点检" }
]);
const activeName = ref("detailList");

// 切换tab
const handelTabSelected = val => {
  activeName.value = val;
};
</script>

<style lang="scss" scoped>
@import url("@/views/gas/consumption/scss/common.scss");

.consumption-container {
  padding-top: 0;
}
</style>
